<!--
 * @Description: 
 * @Author: Dxcr
 * @Date: 2024-09-12 10:47:33
 * @LastEditTime: 2024-09-12 14:00:49
 * @LastEditors: Dxcr
--><template>
    <div class="AlarmPopup_container">
        <div class="map_alarm">
            <div class="map_alarm_title">
                {{ info.pipeName }}
            </div>
            <div class="map_alarm_content">
                报警类型: {{ info.alarmTypeName }}<br />
                报警时间: {{ info.alarmTime }}<br />
                报警位置: {{ info.locText }}
            </div>
        </div>
    </div>
</template>
<script setup>
import {
    defineComponent,
    ref,
    reactive,
    computed,
    toRefs,
    onMounted
} from 'vue'
import { useRouter, useRoute } from 'vue-router';
const getRoute = useRoute()
const router = useRouter()
const data = reactive({
})

const props = defineProps({
    info: {
        type: Object,
        default: {},
    },
});
onMounted(() => {
})
</script>
<style lang="scss" scoped>
.AlarmPopup_container {
    width: 350px;
    //报警 弹出层
    .map_alarm {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        background: rgba(52, 15, 10, 0.6);
        border: 1px solid rgba(255, 51, 51, 0.45);
        box-shadow: inset 0px 0px 5px 0.5px rgba(255, 64, 3, 0.65);
    }

    .map_alarm_title {
        font-weight: bold;
        color: #ff3104;
        padding: 6px 8px;
        cursor: pointer;
        font-size: 14px;
        flex: 0 0 120px;
        min-width: 45px;
    }

    .map_alarm_content {
        border-left: 1px solid #ff0404;
        cursor: pointer;
        font-size: 14px;
        padding: 6px 8px;
    }
}

:deep {}
</style>
